<template>
  <div id="incityCancelRule">
    <div class="top_bar">
      <top-bar :title="title" v-show="IsTopbar">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="incityCancelRule_box">
      <h6>乘客无责</h6>
      <p>1.提交订单后无司机接单，乘客取消订单不需要承担违规责任；</p>
      <p>2.司机接单后，乘客在平台显示的可免责取消的时间段内取消订单，不需要承担违规责任 ;</p>
      <p>3.司机接单后未在平台显示的约定时间内到达起点，乘客取消订单不需要承担违规责任；</p>
      <p>4.系统主动关闭的订单，乘客不需要承担违规责任；</p>
      <p>5.因乘客联系不上车主，导致订单取消，乘客不承担违规责任。</p>
      <h6>乘客有责</h6>
      <p>1.司机接单后，乘客在平台显示的可免责取消的时间段外取消订单，需要承担违规责任;</p>
      <p>2.司机在规定时间内到达乘客起点，乘客未按规定时间上车，司机取消订单乘客需要承担违规责任；</p>
      <p>3、其它因乘客问题导致订单取消，乘客需要承担违规责任。</p>
      <h5>注：每周乘客有三次有责取消机会 ,如果超过三次， 无法继续使用市内出行，下周一恢复用车服务。</h5>
    </div>
  </div>
</template>
<script>
import TopBar from '@/components/TopBar';
import Utils from '@/common/pakjUtils';
import { Icon } from 'mand-mobile';
export default {
  components: {
    [TopBar.name]: TopBar,
    [Icon.name]: Icon
  },
  data() {
    return {
      title: '市内用车订单取消规则',
      IsTopbar: true
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
#incityCancelRule {
  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  h6, h5 {
    display: block;
    font-size: 22px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
  }

  .incityCancelRule_box {
    padding: 30px 30px;
  }

  .incityCancelRule_box h6 {
    font-size: 28px;
    color: #333;
    padding: 60px 0px 10px 0px;
    font-weight: 400;
  }

  .incityCancelRule_box p {
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .incityCancelRule_box h5 {
    font-size: 22px;
    color: #999;
    font-weight: 400;
    margin-top: 20px;
  }

  .top_bar {
    position: absolute;
    top: 0px;
    z-index: 1000;
    width: 100%;
  }

  .back_btn {
    width: 22px;
    height: 38px;
  }
}
</style>
